<template>
  <div class="p-10px">
    <CategorySelector :disabled="!isShowAttrList" />
    <!-- 
      vue2中自定义事件默认都是自定义事件，除非用.native才是原生DOM事件
      vue3中自定义事件默认都是原生DOM事件，除非子组件内部通过emits/defineEmits声明接受，才是自定义事件

      $event 是事件的第一个参数
        触发事件传入的第一个参数，就是$event的值
     -->
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="setIsShowAttrList"
      @setAttr="attr = $event"
    />
    <SaveOrUpdateAttr
      v-if="!isShowAttrList"
      @setIsShowAttrList="setIsShowAttrList"
      :currentAttr="attr"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Attr',
  });
</script>

<script lang="ts" setup>
  import { ref } from 'vue';
  import CategorySelector from '../category-selector/index.vue';
  import AttrList from './components/AttrList.vue';
  import SaveOrUpdateAttr from './components/SaveOrUpdateAttr.vue';
  import type { AttrModel } from '/@/api/product/model/attrModel';

  const isShowAttrList = ref(true);

  const attr = ref<AttrModel>({
    id: undefined,
    attrName: '',
    categoryLevel: 3,
    attrValueList: [],
  });

  const setIsShowAttrList = () => {
    isShowAttrList.value = !isShowAttrList.value;
  };
</script>
